<template>
	<view class="wapper">
		<view class="header">
			<view v-for="(item,index) in navList" @click="tabChange(item.type)" :class="{active:type==item.type}"
				:key='index'>
				<view>{{item.title}}</view>
				<view class="activeLine" v-show="type==item.type"></view>
			</view>
		</view>
		<scroll-view class="commodity_list" scroll-y :refresher-enabled='true' @refresherrefresh='refresherrefresh'
			:refresher-triggered='triggered'>
			<commodityList :list="commodityList" :isSecondKill='isSecondKill' :isSecondKillType='type'
				@commodity_click='commodityClick'></commodityList>
			<view style="height: 80rpx;background-color: transparent;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import commodityList from '../components/commodity-list.vue'
	import {
		seckillList
	} from '../../../api/index/index'
	export default {
		components: {
			commodityList: commodityList
		},
		data() {
			return {
				navList: [{
					title: '今日秒杀',
					type: 1
				}, {
					title: '明日预览',
					type: 2
				}],
				commodityList: [],
				isSecondKill: true,
				type: 1,
				triggered: false,
				isRefresh: false,
				//#ifdef H5
				IS_H5: true,
				//#endif
			}
		},
		onLoad() {
			this.getList();
		},
		onShow() {
			if (this.IS_H5) {
				document.body.addEventListener('touchmove', this.touchmoveFn, {
					passive: false
				});
			}
		},
		onHide() {
			if (this.IS_H5) {
				document.body.removeEventListener('touchmove', this.touchmoveFn, {
					passive: false
				})
			}
		},
		onUnload() {
			if (this.IS_H5) {
				document.body.removeEventListener('touchmove', this.touchmoveFn, {
					passive: false
				})
			}
		},
		methods: {
			touchmoveFn(e) {
				e.preventDefault();
			},
			refresherrefresh() {
				this.triggered = true;
				this.isRefresh = true;
				this.getList()
			},
			getList() {
				if (!this.isRefresh) this.commodityList = [];
				seckillList({
					type: this.type
				}).then(({
					data: {
						list
					}
				}) => {
					this.triggered = false;
					this.isRefresh = false;
					this.commodityList = list;
				})
			},
			tabChange(n) {
				this.type = n;
				this.getList();
			},
			commodityClick(data) {
				let url = '/pages/shopping/commodity/detail/index?id=' + encodeURIComponent(data.id) +'&index=1';
				if (data.topicList[0].id) {
					url += '&topic_id=' + data.topicList[0].id
				}
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped>
	.wapper {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #EFF0F1;
		overflow: hidden;
	}

	.header {
		position: fixed;
		top: var(--window-top);
		left: 0;
		width: 100%;
		display: flex;
		height: 98rpx;
		align-items: center;
		background-color: #FFFFFF;
		z-index: 2;
	}

	.header>view {
		flex: 1;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #070707;
		text-align: center;
		position: relative;
		height: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.active {
		font-weight: 600 !important;
	}

	.activeLine {
		position: absolute;
		bottom: 9rpx;
		left: 50%;
		margin-left: -22rpx;
		width: 44rpx;
		height: 8rpx;
		background: #F54642;
	}

	.commodity_list {
		margin-top: 118rpx;
		padding: 0 22rpx;
		box-sizing: border-box;
		height: calc(100vh - var(--window-top) - 98rpx);
	}
</style>
